<template>
  <!--模态窗 多行-->
  <transition
    name="custom-classes-transition"
    enter-active-class="animated fadeInDown"
    leave-active-class="animated fadeOutUp"
  >
    <div class="modal-ctrl-body" v-show="revampDetailsModal.isShow">
      <div class="modal-ctrl-main even-row-ctrl" >

        <div class="modal-title">
          <p>修改警员</p>
        </div>
        <div class="modal-ctrl-content">
          <div class="even-row">
            <div class="modal-row" >
              <div class="modal-form-key f-l indispensable">
                警员代码：
              </div>
              <input type="text" maxlength="16" placeholder="最长16个字符" v-model="policeData.policeCode" class="modal-text f-l">
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l indispensable">
                警员姓名：
              </div>
              <input type="text" maxlength="16" placeholder="最长16个字符" v-model="policeData.name" class="modal-text f-l">
            </div>

            <div class="modal-row">
              <div class="modal-form-key f-l indispensable">
                性别：
              </div>
              <select @change="selectGender" :value="policeData.gender">
                <option value="男">男</option>
                <option value="女">女</option>
              </select>
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l indispensable">
                所属单位：
              </div>
              <input type="text" v-model="stationName" readonly="readonly" @click="getStationTree" class="modal-text f-l" >
              <input type="hidden" v-model="policeData.stationId">
              <div class="sectionTree" v-show="sectionTreeIShow">
                <div id="sectionRevampTree" class="ztree sectionTree-box"></div>
              </div>
            </div>

            <div class="modal-row" >
              <div class="modal-form-key f-l">
                联系电话：
              </div>
              <input type="text" v-model="policeData.telephone" class="modal-text f-l">
            </div>

            <div class="modal-row">
              <div class="modal-form-key f-l">
                警员状态：
              </div>
              <select @change="selectStatus" :value="policeData.status">
                <option value="1">启用</option>
                <option value="0">禁用</option>
              </select>
            </div>

            <div class="modal-row">
              <div class="modal-form-key f-l indispensable">
                警员类型：
              </div>
              <select @change="selectPoliceType" :value="policeData.policeTypeId">
                <option value="-1">请选择</option>
                <option :value="itemPoliceType.id" v-for="itemPoliceType in policeType">
                  {{itemPoliceType.type}}
                </option>
              </select>
            </div>
            <div class="modal-row">
              <div class="modal-form-key f-l indispensable">
                职位：
              </div>
              <select @change="selectPolicePosition" :value="policeData.policePosition">
                <option value="-1">请选择</option>
                <option :value="itemPolicePosition.id" v-for="itemPolicePosition in policePosition">
                  {{itemPolicePosition.position}}
                </option>
              </select>
            </div>

            <div class="modal-row">
              <div class="modal-form-key f-l">
                办公电话：
              </div>
              <input type="text" placeholder="格式（01012345678）" v-model="policeData.officeTel" class="modal-text f-l">
            </div>

            <div class="modal-row">
              <div class="modal-form-key f-l">
                生日：
              </div>
              <div class="input-group date" id="dateRevampPoliceBox">
                <span class="input-group-addon glyphicon glyphicon-list"><i class="fa fa-calendar"></i></span>
                <input type="hidden" ref="birthday" name="birthday">
                <input type="text" readonly="readonly" ref="birthday" id="dateRevampPolice" class="form-control" required="required" data-date-format="dd-mm-yyyy">
              </div>
            </div>

            <div class="modal-row">
              <div class="modal-form-key f-l">
                排序：
              </div>
              <input type="text" maxlength="4" placeholder="最长4位字符" v-model="policeData.sort" class="modal-text f-l">
            </div>

            <div class="modal-row">
              <div class="modal-form-key f-l indispensable">
                是否为领导：
              </div>
              <select @change="selectIsLeader" :value="policeData.isLeader">
                <option value="-1">请选择</option>
                <option value="0">否</option>
                <option value="1">是</option>
              </select>
            </div>

            <div class="modal-row photo" style="display: block">
              <div class="modal-form-key f-l">
                警员相片：
              </div>
              <div class="photo-up-btn f-l">
                <input type="file" name="photo" ref="formFile" @change="filePhoto" class="modal-text f-l">
                <span class="photo-btn">选择相片</span>
                <input type="hidden" name="photoId" v-model="policeData.pictureUrl">
              </div>
              <button type="button" :disabled="subImgDls" class="btn btn-info f-l" @click="bindPhoto" v-show="photoSrc!==''">上传</button>
              <button type="button" class="btn btn-info f-l" @click="clearPhoto" v-show="photoSrc!==''">清除</button>
              <img :src="photoSrc" class="f-l photo-img" alt="">
            </div>

          </div>

        </div>
        <div class="btns text-r">
          <button type="button" class="btn btn-default" @click="closeModal">取消</button>
          <button type="button" class="btn btn-info" @click="subBtn">确定</button>
        </div>
        <!--{{userDetailsModal.obj}}-->
      </div>
    </div>
  </transition>
</template>

<script>
  export default {
    name: "revampPoliceModal",
    props:["revampDetailsModal","policeId"],
    data(){
      return{
        //警员信息
        policeData:{
          policeCode:"", //警员编号
          name:"", //姓名
          gender:"男", //性别
          stationId:"", //部门id
          telephone:"", //联系电话
          status:"1", //状态
          policeTypeId:"-1", //警员类型id
          policePosition:"-1", //警员职位id
          officeTel:"", //办公电话
          birthday:"", //生日
          sort:"", //排序
          pictureUrl:"", //警员相片
          isLeader:"-1", //是否领导
        },
        photoSrc:"",
        photoFile:"",
        subImgDls:true,
        stationName:"",
        //缓存信息
        getSessionStorage:{},
        policeType:[],
        policePosition:[],
        setting : {
          data: {
            simpleData: {
              enable: true
            },
          }
        },
        sectionTreeIShow:false,
        upPoliceId:""
      }
    },
    mounted(){
      let _this = this;
      this.setting.callback = {
        onClick:function(event,treeId,treeNode){ //新增警员部门树选择
          //console.log(treeNode);
          _this.stationName = treeNode.name;
          _this.policeData.stationId = treeNode.id;
          _this.sectionTreeIShow = false;
        }
      };
    },
    created(){
      //日期控件
      let _this = this;
      $(function () {
        //console.log($("#dateRevampPolice"));
        $('#dateRevampPoliceBox').datetimepicker({
          language: "zh-CN",
          format: "yyyy-mm-dd",
          minView: "month",
          autoclose: true
        }).on("changeDate",function(ev){
          ////console.log(ev.date.valueOf());
          let selectDate = ev.date.valueOf();
          let theDate = new Date().getTime(); //当前时间
          if( selectDate >= theDate ){
            _this.s_alert("选择时间不能是未来时间！");
            // alert("选择时间不能是未来时间！");
            $(".form-control").val("");
            $(".form-control").prev().val("");
          }
        });
      });
    },
    watch:{
      revampDetailsModal:{
        handler(v1){
          //设置缓存
          this.getSessionStorage = JSON.parse(sessionStorage.getItem("stationCommunication"));
          //console.log(this.getSessionStorage);
          //部门名称
          this.stationName = this.getSessionStorage.name;
          //部门id
          this.policeData.stationId = this.getSessionStorage.id;
          //警员类型列表
          this.policeTypeFn();
          //警员岗位列表
          this.policePositionFn();
          ////console.log(v1);
          this.upPoliceId = this.policeId;
          if( v1.isShow === true ){ //监听弹窗变化。
            let session = JSON.parse(sessionStorage.getItem("stationCommunication"));
            this.getSessionStorage.name = session.name;
            this.getSessionStorage.id = session.id;
            this.policeData.stationId = this.getSessionStorage.id;
            this.stationName = this.getSessionStorage.name;
            ////console.log(session);
            //获取警员信息
            this.getPoliceData(this.policeId);
          }
        },
        deep:true
      }
    },
    methods:{
      //警员相片
      filePhoto(ele){
        this.photoFile = ele.target.files[0];
        if( this.photoFile.type ){
          let imgTypeArr = this.photoFile.type.split("/");
          let imgType = imgTypeArr[imgTypeArr.length-1];
          //console.log(imgType);
          if( this.verifyForm.isImg(imgType) ){
            this.photoSrc = window.URL.createObjectURL(this.photoFile);
            this.subImgDls = false;
          }else{
            this.s_alert("选择的不是图片文件！");
            this.photoSrc = "";
            this.$refs.formFile.value = "";
          }
        }else{
          this.s_alert("选择的不是图片文件！");
        }
      },
      //清除相片
      clearPhoto(){
        this.photoSrc = "";
        this.policeData.pictureUrl = "";
        this.$refs.formFile.value = "";
      },
      //绑定相片
      bindPhoto(){
        this.subImgDls = true;
        //jp-TIFS-FileCenter-ms/file?businessId=

        let param = new FormData();
        param.append('file',this.photoFile);//通过append向form对象添加数据
        //console.log(this.photoFile);
        let configFile = {
          headers:{'Content-Type':'multipart/form-data'}
        };
        this.$axios.post(baseURL+"api/jp-TIFS-FileCenter-ms/file",param,configFile)
          .then((data)=>{
            this.s_alert("上传成功！");
            // alert("上传成功！");
            //console.log(data.data.fileID);
            this.policeData.pictureUrl = data.data.fileID;
          })
          .catch((err)=>{
            this.s_alert("上传失败！");
            // alert("上传失败！");
            //console.log(err);
          });
      },
      //提交
      subBtn(){
        let params = {};
        for( let policeKey in this.policeData ){
          params[policeKey] = this.policeData[policeKey];
        }
        params.birthday = this.$refs.birthday.value;
        params.birthday ? params.birthday = params.birthday+"T02:09:17.245+05:30":"";
        ////console.log(params);
        if( this.verifyForm.isNull(params.name) ){
          this.s_alert("警员姓名不能为空！");
          // alert("警员姓名不能为空！");
          return false;
        }else if( this.verifyForm.isNull(params.policeCode) || this.verifyForm.letterAndNumber(params.policeCode) ){
          this.s_alert("警员编号为空或格式不正确！只能输入字母与数字！");
          // alert("警员编号不能为空！");
          return false;
        }else if( this.verifyForm.isNull(params.policePosition) ){
          this.s_alert("职位不能为空！");
          // alert("警员职位不能为空！");
          return false;
        }else if( this.verifyForm.isNull(params.policeTypeId) ){
          this.s_alert("警员类型不能为空！");
          // alert("警员类型不能为空！");
          return false;
        }else if( this.verifyForm.isNull(params.stationId) ){
          this.s_alert("所属单位不能为空！");
          // alert("所属单位不能为空！");
          return false;
        }else if( this.verifyForm.iphone(params.telephone) ){
          this.s_alert("联系电话格式不正确！");
          // alert("联系电话格式不正确！");
          return false;
        }else if( this.verifyForm.isIphoneOrTell(params.officeTel) ){
          this.s_alert("办公电话格式不正确！");
          // alert("办公电话格式不正确！");
          return false;
        }else if( this.verifyForm.isNull(params.isLeader) ){
          this.s_alert("请选择是否为领导！");
          // alert("请选择是否为领导！");
          return false;
        }else if( params.gender !== "男" && params.gender !== "女" ){
          this.s_alert("请选择性别！");
          // alert("请选择性别！");
          return false;
        }else if( this.verifyForm.isNumber(params.sort) ){
          this.s_alert("排序字段只能为整数！");
          // alert("请选择是否为领导！");
          return false;
        }

        //console.log(params);
        params.id = this.upPoliceId;
        //return false;
        this.$axios.put(this.HOST+"/police/",params)
          .then((data)=>{
            if( data.data.success ){
              this.s_alert("修改成功！");
              // alert("修改成功！");
              this.closeModal();
              this.s_logwrite("基础信息管理-警员管理","修改警员");
              this.$emit("newPoliceSucceed");//刷新页面
              this.initAddPoliceData();//清除警员缓存信息
            }else{
              let msg = data.data.errorMsg.split("[");
              this.s_alert(msg[0]);
              // alert(msg[0]);
            }
            //console.log(data);
          })
          .catch((err)=>{
            //console.log(err);
          })
      },
      //更新
      upDataSub(){

      },
      //警员类型列表
      policeTypeFn(){
        this.$axios.get(this.HOST+"/police/getAllPoliceType")
          .then((data)=>{
            this.policeType = data.data;
            //console.log(this.policeType);
          })
          .catch((err)=>{
            //console.log(err);
          })
      },
      //警员岗位列表
      policePositionFn(){
        this.$axios.get(this.HOST+"/police/getAllPolicePosition")
          .then((data)=>{
            this.policePosition = data.data;
            //console.log(this.policePosition);
          })
          .catch((err)=>{
            //console.log(err);
          })
      },
      //性别选择
      selectGender(ele){
        this.policeData.gender = ele.target.value;
        //console.log(ele.target.value);
      },
      //警员状态选择
      selectStatus(ele){
        this.policeData.status = ele.target.value;
        ////console.log(ele.target.value);
      },
      //是否为领导
      selectIsLeader(ele){
        this.policeData.isLeader = ele.target.value;
      },
      //警员类型选择
      selectPoliceType(ele){
        this.policeData.policeTypeId = ele.target.value;
        ////console.log(ele.target.value);
      },
      //警员职位选择
      selectPolicePosition(ele){
        this.policeData.policePosition = ele.target.value;
        ////console.log(ele.target.value);
      },
      //是否测试员选择
      selectIsTest(ele){
        this.policeData.isTest = ele.target.value;
        ////console.log(ele.target.value);
      },
      //获取部门树
      getStationTree(){

        this.sectionTreeIShow = !this.sectionTreeIShow;
        if(this.sectionTreeIShow){
          this.$axios.get(this.HOST+'/station/getOrgaInfo',this.getSessionStorage.id)
            .then((data)=>{
              $.fn.zTree.init($("#sectionRevampTree"), this.setting, data.data.data);
              //console.log(data);
            })
            .catch((err)=>{
              //console.log(err);
            })
        }
      },
      //关闭模态窗
      closeModal(){
        this.$emit("closeModalRevampPolice");
      },
      //清除新增警员缓存
      initAddPoliceData(){
        this.policeData={
          policeCode:"", //警员编号
          name:"", //姓名
          gender:"男", //性别
          stationId:"", //部门id
          telephone:"", //联系电话
          status:"1", //状态
          policeTypeId:"-1", //警员类型id
          policePosition:"-1", //警员职位id
          officeTel:"", //办公电话
          birthday:"", //生日
          sort:"", //排序
          isTest:"0", //是否测试员
          isLeader:"-1", //是否领导
        };
        this.$refs.formFile.value = "";
        this.$refs.birthday.value = "";
        this.photoSrc = "";
        this.subImgDls = true;
        this.sectionTreeIShow = false;
      },
      //获取警员信息
      getPoliceData(params){
        this.$axios.get(this.HOST+"/police/?policeId="+params)
          .then((data)=>{
            //console.log(data.data.data);
            const successData = data.data.data;
            this.stationName = successData.stationName;
            this.policeData.stationId = successData.stationId;
            for( let dataKey in successData ){
              for( let policeDataKey in this.policeData ){
                if( dataKey === policeDataKey ){
                  this.policeData[policeDataKey] = successData[dataKey];
                }
              }
            }
            //this.$refs.birthday.value
            if( successData.pictureUrl ){
              this.photoSrc = baseURL+"api/jp-TIFS-FileCenter-ms/file?businessId="+successData.pictureUrl;
            }else{
              this.photoSrc = "";
            }

            if( successData.birthday ){
              this.$refs.birthday.value = successData.birthday;
            }

          })
          .catch((err)=>{
            //console.log(err);
          })
      }
    }
  }
</script>

<style scoped>
  .sectionTree-box{
    position: absolute;
    z-index: 99;
    padding: 10px;
    right: 0;
    width: 60%;
    top: 30px;
    height: 200px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid rgba(51,51,51,0.2);
  }
  .form-control{
    height: 100%;
    border: 1px solid #ccc;
  }
</style>
